<template>
	<div class="bg-white">

		<div class="m-2 shadow rounded">
			<div class="bg-primary p-2 d-flex justify-content-between align-items-center">
				<span class="text-white">基础数据</span>
				<Button @click="submit" type="primary" size="small">保存</Button>
			</div>
			<div class="p-2">
				<Form :label-width="80">
				<Row class="w-100">
					<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="门店">
						<Select v-model="room.storeid">
							<Option :key="key" :value="item.storeid" v-for="(item, key) in mds">{{item.name}}</Option>
						</Select>
						</FormItem>
					</Col>
					<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="房间名">
							<Input v-model="room.roomname" placeholder="请输入房间id"></Input>
						</FormItem>
					</Col>
					<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="房间单价">
							<Input v-model="room.price" placeholder="请输入房间单价/分钟"></Input>
						</FormItem>
					</Col>
					<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="房间状态">
							<Select v-model="room.statu">
								<Option :key="key" :value="item.code" v-for="(item, key) in roomStatus">{{item.value}}</Option>
							</Select>
						</FormItem>
					</Col>
					<Col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
						<FormItem label="封面">
							<input @change="changeFile" id="fjcover" class="d-none" type="file" />
							<label for="fjcover" class="btn btn-primary">选择文件</label>
							<img :src="room.cover" />
						</FormItem>
					</Col>
					<Col :xxl="12" :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
						<FormItem label="描述">
							<Input type="textarea" v-model="room.ms" placeholder="请输入描述"></Input>
						</FormItem>
					</Col>
				</Row>
        </Form>

					<!--      <FormItem  label="房间状态">-->
					<!--        <Input v-model="room.roomAFlg" placeholder="请输入房间状态"></Input>-->
					<!--      </FormItem>-->
			</div>
		</div>

<!--		<div class="m-2 shadow rounded"> 蔡哥例子 -->
<!--			<div class="bg-shuilan p-2 d-flex justify-content-between align-items-center">-->
<!--				<div class="d-flex align-items-center">-->
<!--					<span class="text-white">设备</span><Button type="error" size="small">新增</Button>-->
<!--				</div>-->
<!--				<Button type="primary" size="small">保存</Button>-->
<!--			</div>-->
<!--			<div class="p-2">-->
<!--			</div>-->
<!--		</div>-->

    <!--  设备模块开始  -->
    <div class="m-2 shadow rounded">
      <!-- 设备模块头部标题：start   -->
      <div class="bg-shuilan p-2 d-flex justify-content-between align-items-center">
        <span class="text-white">设备</span>
        <div class="d-flex align-items-center">
          <Button type="error" size="small" @click="newSb">新增</Button>
        </div>
        <!--	<Button type="primary" size="small" @click="sbsubmit">保存</Button>-->
      </div>
      <!-- 设备模块头部标题：end  -->

      <!-- 房间设备表单开始：start -->
      <div>
        <Table border :columns="tableInfo.columns" :data="tableInfo.sbdata">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" class="mr-2" @click="show(row.sbid)">详细</Button>
            <Button type="error" size="small" @click="remove(row.sbid)">删除</Button>
          </template>
        </Table>
      </div>
      <!-- 房间设备表单结束：end -->
    </div>
    <!-- 设备模块结束 -->

    <!-- 门禁部分开始 -->
    <div class="m-2 shadow rounded">
      <div class="bg-secondary p-2 d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
          <span class="text-white">门禁</span>
          <Button type="error" size="small" class="ml-2" @click="showmj">新增</Button>
        </div>
        <Button type="primary" size="small" @click="showmjxq">详情</Button>
      </div>
    </div>
    <!-- 门禁部分结束 -->



	</div>
</template>

<script>
	export default {
		data() {
			return {
        //房间数据部分
        room: {
          //房间字段的数据
          storeid: "",
          roomid: "",
          roomname: "",
          ms: "",
          price: "",
          roomAFlg: "",
          cover: "",
          //imgs: [], //图片数组
        },
        roomStatus: [],
        mds: [],
        //房间数据部分结束

        //:斯迪：2025.2.17--设备部分数据
        tableInfo:{
          columns: [
            {
              title: "设备编号",
              key: "sbid",
            },
            {
              title: '设备图片',
              key: 'cover'
            },
            {
              title: '设备名称',
              key: 'name'
            },
            {
              title: '设备描述',
              key: 'ms'
            },
            {
              title: '操作',
              slot: 'action'
            }
          ],
          sbdata:[]
        },
        //设备部分数据结束
			}


		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},

    created: function() {
      this.room.roomid = this.$route.query.id;
      this.loadRoomStatu().then(this.loadStore).then(this.loadData).then(this.loadSb);
    },

		methods: {

      //斯迪：2025.2.16-设备部分调用方法--开始
      loadSb: function() {
        //1:发送get请求至url地址："/md/all"
        return this.http.get({
          url: "/sb/page",
          param: {
          }
        }).then(data => {
          console.log(data);
          //2:获取数据：给data数组复制拿到数据
          this.tableInfo.sbdata = data.records;
        });
      },
      //设备查看
      show: function(sbId) {
        this.$router.push({
          path: "/sb/detail?sbId=" + sbId
        })
      },

      //设备新增
      newSb: function() {
        this.$router.push({
          path: "/sb/new"
        })
      },

      //设备删除
      remove: function(sbId) {
        this.message.confirm({
          title: "删除提示",
          content: "即将删除设备，确定吗？",
          onOk: () => {
            this.http.delete({
              url: "/sb/info",
              param: {
                sbId
              }
            }).then(data => {
              this.search();
            });
          },
          onCancel: () => {
            this.message.info('操作已取消');
          }
        });
      },

      //设备查询更新
      search: function() {
        this.http.get({
          url: "/sb/page",
          param: {
            // 传一个当前页
            current: this.tableInfo.currentPage,
            size:this.tableInfo.pageSize,
          }
        }).then(data => {
          this.tableInfo.sbdata = data.records;
        });
      },
      //设备部分调用方法--结束

      //斯迪：2024.2.17门禁部分--开始
      //门禁:新增-弹窗
      showmj: function(code) {
        this.$router.detail.open({
          name: "mj_new",
          params: {
            code
          }
        });
      },

      //门禁详细-调用弹窗
      showmjxq:function(code) {
        this.$router.detail.open({
          name: "mj_detail",
          params: {
            code
          }
        });
      },
      //斯迪：2024.2.17门禁部分--结束

			loadStore: function() {
				return this.http.get({
					url: "/md/all",
					param: {

					}
				}).then(data => {
					console.log(data);
					this.mds = data;
				});
			},
			loadRoomStatu: function() {
				return this.http.get({
					url: "/dict/all",
					param: {
						type: "ROOMSTATU"
					}
				}).then(data => {
					this.roomStatus = data.fjstatusList;
				});
			},
			loadData: function() {
				return this.http.get({
					url: "/fj/info",
					param: {
						roomid: this.room.roomid
					}
				}).then(res => {
					this.room = res;
				});
			},

      submit: function() {
        if (this.room.roomname === "") {
          this.message.error("请输入房间名");
          return;
        }

        this.message.confirm({
          title: "保存提示",
          content: "即将修改房间，确定吗？",
          onOk: () => {
            this.http.put({
              url: "/fj/info",
              data: this.room
            }).then(res => {
              this.message.info("修改成功");
              //this.$tabs.close();
            });
          },
          onCancel: () => {
            this.message.info('操作已取消');
          }
        });
      },


      //文件传输部分
			changeFile: function(event) {
				console.log(event.target.files);
				if (event.target.files && event.target.files.length > 0) {
					this.loadFile(event.target.files[0]);
				}
			},
			loadFile: function(file) {
				const reader = new FileReader();
				reader.onload = e => {
					const content = e.target.result;
					// 处理文件内容
					// this.$emit("success", content);
					console.log(content);

					this.room.cover = content;
				};
				reader.onerror = function(e) {
					console.error("读取文件时发生错误:", e.target.error);
				};
				reader.readAsDataURL(file);



				this.http.uploadFile({
					path: "/fj/cover/",
					file,
					onProgress: progressData => {
						console.log(progressData);
					}
				}).then(res => {
					console.log(res);
				});

			},
		},

	}
</script>

<style>
</style>